<template>
  <div class="image-element" :class="{'image-element-out-animation': outAnimation}" @mouseout="handleMouseOut" @mouseover="handleMouseOver">
    <div class="header-option" v-show="showOptions">
      <span class="copy-link" @click="copyToClip">复制图片链接</span>
      <el-tooltip
        effect="dark"
        content="更多操作"
        placement="top-start"
      >
        <el-icon @click="toOperate">
          <MoreFilled />
        </el-icon>
      </el-tooltip>
    </div>
    <n-image
      object-fit="cover"
      :src="props.image.url + '?w=230'"
      :preview-src="props.image.url"
    />
    <div class="operation-container">
      <el-button type="primary"></el-button>
      <el-button type="danger"></el-button>
    </div>
    <div class="bottom-option" v-show="showOptions">
      <el-popconfirm title="确认删除？" @confirm="remove">
        <template #reference>
          <span class="delete">删除</span>
        </template>
      </el-popconfirm> 
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { removeImg } from "../../request/img";
import { useImageStore } from "../../store/image";
import { useUserStore } from "../../store/user";
import { Image } from "../../type/entity";
import { copyText } from '../../util/chore'
const showOptions = ref(false)
const imageStore = useImageStore()
const outAnimation = ref(false)
const userStore = useUserStore()
const props = defineProps<{
  image:Image,
}>()
function handleMouseOut(){
  showOptions.value = false
}
function handleMouseOver(){
  showOptions.value = true
}
function copyToClip(){
  copyText(props.image.url).then(
    val => {
      ElMessage({type: 'success', message: '复制成功'})
    }
  )
}
function remove(){
  removeImg(props.image.id).then(
    val => {
      if(val.data.success){
        outAnimation.value = true
        setTimeout(() => {
          imageStore.removeImage(props.image.id)
          userStore.user.number = userStore.user.number as number - 1
          ElMessage({type: 'success', message: '删除成功'})
        }, 500);
      }
    }
  )
}
function toOperate(){
  imageStore.operatingImage = props.image
  imageStore.operating = true
}
</script>

<style scoped>

</style>